<template>
  <div class="withdrawal container">
    <div class="topBg"></div>
    <div class="top-container">
      <div class="tip1">可提现金额（元）</div>
      <div class="tip2">{{ totalFunds }}</div>
    </div>
    <div class="middle-container">
      <div class="middle-container-top">
        <div class="tip1">提现金额</div>
        <div class="tip2">需勾选记录自动生成总额</div>
      </div>
      <div class="middle-container-middle">
        <div class="tip1">￥</div>
        <input class="tip2" v-model="totalFee" disabled placeholder="满10元可以提现" />
      </div>
      <div class="line"></div>
      <div class="tip3">
        <div>提现至</div>
        <div>{{ cardNo }}</div>
      </div>
      <div class="btn" @click="cashApply">提现申请</div>
    </div>
    <div class="list-container">
      <div class="list-item" @click="selectItem(item)" :class="{ selected: item.isSelect }"
        v-for="(item, index) in divideRecordList">
        <div style="display: flex;">
          <img :src="item.isSelect ? selected : unselect" />
          <div>
            <div class="list-item-line">
              <div>{{ item.telephone }}</div>
              <div>{{ item.productName }}</div>
            </div>
            <div class="list-item-line">
              <div>{{ item.payTime.slice(0, -2) }}</div>
              <div>{{ '￥' + item.payMoney }}</div>
            </div>
          </div>
        </div>
        <div class="divide">{{ '￥' + item.divideMoney }}</div>
      </div>
    </div>
    <van-dialog v-model:show="show" confirm-button-text="返回首页" @close="goHome">
      <div class="dialog-slot-style">
        <img :src="applyImg" />
        <div class="tips">
          <div>提交金额：{{ totalFee }}元</div>
          <div>提现账户：{{ cardNo }}</div>
          <div>预计到账时间：申请成功后的1-3个工作日</div>
        </div>
      </div>

    </van-dialog>
  </div>
</template>
<script lang="ts">
// @ts-nocheck
import { ref, watch } from "vue";
import { requireImg } from "@/assets/imgUrl";
import { useRouter } from "vue-router";
import { getDivideRecord } from '@/api/record';
import { getFundsInfo, cashApply } from '@/api/withdrawal';
import { showDialog } from 'vant';

//在setup中
export default {
  name: "App",
  setup() {
    const router = useRouter();
    const applyImg = requireImg('apply.png');
    const goHome = () => {
      router.push('/money')
    }
    return {
      router,
      applyImg,
      goHome
    };
  },
  data() {
    return {
      totalFunds: '',
      totalFee: '',
      show: false,
      divideRecordList: [],
      unselect: requireImg('login/check.png'),
      selected: requireImg('login/checked.png'),
      cardNo: window.userInfo.userInfo.bankCardNo
    }
  },
  mounted() {
    this.getFundsInfo();
    this.getDivideRecord();
  },
  methods: {
    bindWechat() {
      if (this.userInfo) {
        console.log('openid == ', window.openId)
      }
    },
    getFundsInfo() {
      getFundsInfo().then(res => {
        console.log(res);
        this.totalFunds = res.totalFunds
      })
    },
    selectItem(item) {
      let addMoney = item.isSelect ? -item.divideMoney : +item.divideMoney;
      item.isSelect = !item.isSelect
      this.totalFee = addMoney + +this.totalFee

      if (this.totalFee === 0) {
        this.totalFee = ''
      }
    },
    getDivideRecord() {
      getDivideRecord({
        cashType: 0
      }).then(res => {
        res.map(item => {
          item.isSelect = false
        });
        this.divideRecordList = res;
      })
    },
    cashApply() {
      let ids = '';
      this.divideRecordList.map(item => {
        if (!ids) {
          ids = '' + item.recordId
        } else {
          ids = ids + item.recordId
        }
      })

      cashApply({
        divideIds: ids
      }).then(res => {
        this.show = true;
      })
    }
  }
};
</script>
<style lang="scss" scoped>
.withdrawal {
  .topBg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100vw;
    height: 59.5vw;
    background: linear-gradient(270deg, #3399EC 0%, #4F6DF2 100%);
  }

  .top-container {
    position: relative;
    margin-top: 10px;
    color: #FFFFFF;

    .tip1 {
      font-size: 12px;
    }

    .tip2 {
      font-size: 36px;
    }
  }

  .middle-container-top {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .tip1 {
      font-size: 14px;
      font-weight: bold;
    }

    .tip2 {
      font-size: 12px;
      color: #9599A1;
    }
  }

  .middle-container {
    position: relative;
    width: 100%;
    background: #FFFFFF;
    box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.08), 0px -2px 8px -2px rgba(0, 0, 0, 0.05);
    border-radius: 12px;
    padding: 2vw 3vw;

    .middle-container-middle {
      display: flex;
      align-items: center;

      .tip1 {
        font-size: 36px;
        font-weight: bold;
      }

      .tip2 {
        border: 0;
        background-color: white;
        font-size: 28px;
        width: 60vw;
      }
    }

    .line {
      background-color: rgba(#000000, 0.1);
      height: 1px;
      width: 100%;
    }

    .tip3 {
      display: flex;
      justify-content: space-between;
      margin-top: 14px;
    }

    .btn {
      background: #4F6DF2;
      box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.08), 0px -2px 8px -2px rgba(0, 0, 0, 0.05);
      border-radius: 100px;
      width: 315px;
      height: 48px;
      margin: auto;
      line-height: 48px;
      color: white;
      text-align: center;
      margin-top: 25px;
      margin-bottom: 10px;
    }
  }

  .list-container {
    margin-top: 10px;
    height: calc(100vh - 85vw);
    overflow: auto;

    .list-item {
      margin-bottom: 10px;
      display: flex;
      justify-content: space-around;
      background: #FFFFFF;
      padding: 10px 5px;
      box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.08), 0px -2px 8px -2px rgba(0, 0, 0, 0.05);
      align-items: center;
      border-radius: 12px;
      border: 1px solid transparent;

      img {
        width: 20px;
        height: 20px;
        margin-right: 10px;
      }

      .list-item-line {
        width: 50vw;
        display: flex;
        justify-content: space-between;
        color: #9599A1;
        font-size: 12px;
      }

      .divide {
        font-size: 18px;
        font-weight: bold;
      }
    }

    .selected {
      border: 1px solid blue;
    }
  }
  .dialog-slot-style {
    text-align: center;
    img {
      width: 40vw;
      margin-top: 20px;
      margin-bottom: 20px;
    }

    .tips {
      text-align: left;
      margin-left: 10px;
      font-size: 14px;
      font-weight: 500;
    }
  }
}
</style>